import { useState, useEffect } from 'react';
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import Setting from './Setting';
import { useAuth } from '../context/AuthProvider';
import { FlatList, StyleSheet, TouchableOpacity, Text, TextInput, Button, View, Image, ImageBackground, ScrollView } from 'react-native';

const Mysale = ({ navigation }) => {
    const { user } = useAuth();
    const [selectTab, setSelectTab] = useState("");
    const [page, setPage] = useState(1);
    const [list, setList] = useState([]);
    const [isClick, setisClick] = useState(true)
    const [refreshing, setRefreshing] = useState(false);

    useEffect(() => {
        fetch('http://10.7.89.170:3000/puMysale',
            {
                method: 'POST',
            })
            .then(res => res.json())
            .then(res => {
                setRefreshing(false)
                // console.log(res)
                if (page == 1) {
                    // console.log(list);
                    setList(res.List)
                    // console.log(list)
                }
                else {
                    setList([...list, ...res.List])
                }
            })
    }, [page])
    const changeType = (id) => {
        setSelectTab(id)
    }
    const onEnd = () => {
        setPage(page + 1)
    }
    const onRefresh = () => {
        setRefreshing(true);
        setPage(1);
    }
    const renderItem = ({ item }) => (
        <View key={item.id} style={{ marginTop: 25, marginLeft: "10%", borderColor: "lightgrey" }}>
            <View>
                <View style={{ width: "12%", height: 50, }}>
                    <Image source={{ uri: user.avatarUrl }}
                        style={{ width: "100%", height: "100%", borderRadius: 50, marginLeft: 10 }} />
                </View>
                <Text style={{ marginLeft: "20%", marginTop: "-10%", fontSize: 25, marginLeft: "20%" }}>{user.userName}</Text>
                <Text style={{ marginLeft: "70%", marginTop: "-5%", fontSize: 15 }}>
                    {item.Date}
                </Text>
                <View style={{ width: "100%", height: 100 }}>
                    <Text style={{ marginTop: 30, marginLeft: 10 }}>{item.Text}</Text>
                </View>
            </View>
        </View>
    )

    return (
        <View>
            <FlatList
                ListEmptyComponent={<Text>暂无数据</Text>}
                onRefresh={onRefresh}
                refreshing={refreshing}
                data={list}
                renderItem={renderItem}
                onEndReached={onEnd}
                keyExtractor={item => item.id}
            />
        </View>
    );
}

const styles = StyleSheet.create({

});

export default Mysale